import { RFPercentage, /*RFValue*/ } from "react-native-responsive-fontsize";
import styled, { css } from "styled-components/native";

import Feather from "react-native-vector-icons/Feather";

interface ContainerProps {
  onTopOfScreen: boolean;
}

export const Container = styled.View<ContainerProps>`
  padding: ${/*RFValue*/(14)}px ${/*RFValue*/(16)}px;
  background-color: ${({ theme }) => theme.colors.white};
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-top-left-radius: ${/*RFValue*/(16)}px;
  border-top-right-radius: ${/*RFValue*/(16)}px;
`;

export const Title = styled.Text`
  color: rgba(44, 44, 46, 1);
  font-size: ${/*RFValue*/(18)}px;
  font-weight: 700;
  font-family: "HarmonyOS_Sans_SC_Regular";
`;

export const IconWrapper = styled.TouchableOpacity`
  align-items: center;
  justify-content: center;
  background-color: rgba(255,255,255, 1);
  width: ${/*RFValue*/(24)}px;
  height: ${/*RFValue*/(24)}px;
  border-radius: ${/*RFValue*/(146)}px;
`;

export const Icon = styled(Feather)`
  color: ${({ theme }) => theme.colors.black};
  font-size: ${/*RFValue*/(22)}px;
`;
